<template>
    <div class="student-container">
        <div>
            <el-form :inline="true" :model="params.params" class="demo-form-inline" ref="form">
                <el-form-item label="用户名">
                    <el-input v-model="params.params.username" placeholder="请输入用户名" clearable />
                </el-form-item>
                <el-form-item label="学号">
                    <el-input v-model="params.params.no" placeholder="请输入学号" clearable />
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="params.params.trueName" placeholder="请输入姓名" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getDataSource">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="tool">
            <el-button type="primary" @click="dialogVisible = true">添加</el-button>
        </div>
        <el-table style="width: 100%" v-loading="loading" :data="dataSource">
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="no" label="学号" />
            <el-table-column prop="trueName" label="姓名" />
            <el-table-column prop="gender" label="性别" />
            <el-table-column prop="joinSchoolDate" label="入学时间" width="100px" />
            <el-table-column prop="collegeName" label="所属院系" width="200px" />
            <el-table-column prop="majorName" label="所属专业" width="200px" />
            <el-table-column prop="sumScore" label="总分" />
            <el-table-column prop="rank" label="排名" />
            <el-table-column prop="createTime" label="创建时间" width="180px"/>
            <el-table-column label="操作" width="150px">
                <template #default="scope">
                    <div>
                        <el-button type="warning" @click="updateRow(scope.row)" size="small">修改</el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="deleteRow(scope.row)">
                            <template #reference>
                                <el-button type="danger" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin:10px 0" @current-change="currentChange" background layout="prev, pager, next"
            :total="params.total" />
        <el-dialog v-model="dialogVisible" title="修改" width="40%" :before-close="handleClose">
            <el-form :model="formModel" class="demo-form-inline" label-width="100px">
                <el-form-item label="用户名">
                    <el-input v-model="formModel.username" placeholder="请输入用户名" clearable />
                </el-form-item>
                <el-form-item label="学号">
                    <el-input v-model="formModel.no" placeholder="请输入学号" clearable />
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="formModel.trueName" placeholder="请输入姓名" clearable />
                </el-form-item>
                <el-form-item label="入学日期">
                    <el-date-picker v-model="formModel.joinSchoolDate" type="month" format="YYYY-MM" value-format="YYYY-MM"
                        placeholder="请输入入学日期" />
                </el-form-item>
                <el-form-item label="所属院系">
                    <el-select v-model="formModel.collegeId" placeholder="请选择所属院系">
                        <el-option v-for="item in collegeOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属专业">
                    <el-select v-model="formModel.majorId" placeholder="请选择所属专业">
                        <el-option v-for="item in majorOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="formModel.gender">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="总分">
                    <el-input-number v-model="formModel.sumScore" :precision="1" :step="0.1" :min="0" clearable
                        placeholder="请输入总分" />
                </el-form-item>
                <el-form-item label="班级排名">
                    <el-input-number v-model="formModel.rank" :precision="0" :step="1" :min="1" clearable
                        placeholder="请输入班级排名" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitAdd">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import request from '@/utils/http';
import { ref, onMounted } from 'vue'
import { toRaw } from '@vue/reactivity';
import { ElMessage } from 'element-plus'
export default {
    name: "Student",
    setup() {
        const form = ref(null)
        onMounted(() => {
            console.log(form);
        })
    },
    data() {
        return {
            dataSource: [],
            params: {
                username: '',
                no: '',
                trueName: '',
                pageNum: 1,
                total: 0,
                params: {
                }
            },
            loading: false,
            dialogVisible: false,
            formModel: {},
            majorOptions: [],
            collegeOptions: []
        }
    },
    methods: {
        updateRow(row) {
            let id = toRaw(row).studentId;
            request.get("/student/" + id)
                .then(response => {
                    if (response.code === 200) {
                        this.formModel = response.data
                        this.dialogVisible = true
                    }
                })
        },
        deleteRow(row) {
            let id = toRaw(row).studentId;
            request.delete("/student/" + id)
                .then(response => {
                    if (response.code === 200) {
                        ElMessage({
                            message: '操作成功',
                            grouping: true,
                            type: 'success',
                        })
                        this.resetPageParams()
                        this.getDataSource()
                    }
                })
        },
        resetPageParams() {
            this.params.pageNum = 1
        },
        submitAdd() {
            request.post("/student/add", this.formModel)
                .then(response => {
                    if (response.code === 200) {
                        ElMessage({
                            message: '操作成功',
                            grouping: true,
                            type: 'success',
                        })
                        this.dialogVisible = false
                        this.resetPageParams()
                        this.getDataSource()
                    }
                }).finally(() => {
                    this.loading = false
                })
        },
        reset() {
            this.params.params = {}
        },
        handleClose() {
            this.formModel = {}
        },
        getDataSource() {
            this.loading = true
            request.post("/student/list", this.params)
                .then(response => {
                    if (response.code === 200) {
                        let data = response.data
                        this.dataSource = data.list
                        this.params.total = data.total
                    }
                }).finally(() => {
                    this.loading = false
                })
        },
        currentChange(value) {
            this.params.pageNum = value
            this.getDataSource()
        },
        getCollegeOptions() {
            request.get("/college/options")
                .then(response => {
                    this.collegeOptions = response.data
                })
        },
        getMajorOptions() {
            request.get("/major/options")
                .then(response => {
                    this.majorOptions = response.data
                })
        }
    },
    created() {
        this.getDataSource()
        this.getCollegeOptions()
        this.getMajorOptions()
    }

}
</script>

<style>
.tool {
    margin: 10px 0
}
</style>